<template>
    {{ message }}
</template>
<script setup>
    import { ref } from 'vue'
    const second = 50 //每个字符显示的时间间隔
    const delay = 2000 //每个字符显示完后的延迟时间
    const msg = 'Hello, World!' //英文消息
    const msg1 = ref('你好，世界！') //中文消息
    const arr = Array.from(msg)
    const message = ref('')
    for (let i = 0; i < arr.length; i++) {
        setTimeout(() => {
            message.value += arr[i]
        }, i * second)
    }
    setTimeout(() => {
        for (let i = 0; i < arr.length; i++) {
            setTimeout(() => {
                message.value = Array.from(message.value).slice(0, -1).join('');
            }, i * second)
        }
    }, arr.length * second + delay)
    setTimeout(() => {
        const arr1 = Array.from(msg1.value)
        for (let i = 0; i < arr1.length; i++) {
            setTimeout(() => {
                message.value += arr1[i]
            }, i * 1.5 * second)
        }
    }, 2 * (arr.length * second) + delay)
</script>
<style>
    @font-face {
        font-family: 'Minecraft Font';
        src: url('src/assets/font/minecraft_font.ttf'); /* 可更改，引入字体文件 */
    }
    .message {
        font-family: 'Minecraft Font';
        text-align: center;
    }
</style>